<template>
  <div class="hello">
    <el-card v-loading="loading">
      <el-table :data="tableData" width="100%" :height="tableHeight" stripe>
        <el-table-column prop="account" label="账户" width="120" fixed>
          <template slot-scope="scope">
            <span style="color:blue">{{ scope.row.account }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <span style="color:red"> {{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="account_name"
          label="姓名"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.account_name }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sh_holder_no"
          label="上海股东"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.sh_holder_no }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sz_holder_no"
          label="深圳股东"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.sz_holder_no }}
          </template>
        </el-table-column>
        <el-table-column
          prop="total_asset"
          label="资产总值"
          width="120"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:red">
              {{ towNumber(scope.row.total_asset) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="balance"
          label="资金余额"
          width="120"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:blue">{{ towNumber(scope.row.balance) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="stock_value"
          label="证券市值"
          width="120"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <span style="color:red">
              {{ towNumber(scope.row.stock_value) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="available"
          label="可用资金"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            <span style="color:red">{{ towNumber(scope.row.available) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="frozen_cash"
          label="冻结资金"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            <span style="color:blue">
              {{ towNumber(scope.row.frozen_cash) }}</span
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="profit">
      <div class="wp">
        今日收益：<span
          v-if="this.$store.state.todayprofit >= 0"
          style="color:red;"
          >{{ towNumber(this.$store.state.todayprofit) + '%' }}</span
        >
        <span v-if="this.$store.state.todayprofit < 0" style="color:#06e108;">{{
          towNumber(this.$store.state.todayprofit) + '%'
        }}</span>
      </div>
      <div class="wp">
        近一周收益：<span
          v-if="this.$store.state.weekprofit >= 0"
          style="color:red;"
          >{{ towNumber(this.$store.state.weekprofit) + '%' }}</span
        ><span v-if="this.$store.state.weekprofit < 0" style="color:#06e108;">{{
          towNumber(this.$store.state.weekprofit) + '%'
        }}</span>
        <span v-if="this.$store.state.weekprofit === '-'">-</span>
      </div>
      <div class="wp">
        近一月收益：<span
          v-if="this.$store.state.monthprofit >= 0"
          style="color:red;"
          >{{ towNumber(this.$store.state.monthprofit) + '%' }}</span
        ><span
          v-if="this.$store.state.monthprofit < 0"
          style="color:#06e108;"
          >{{ towNumber(this.$store.state.monthprofit) + '%' }}</span
        >
        <span v-if="this.$store.state.monthprofit === '-'">-</span>
      </div>
      <div class="wp">
        总收益：<span
          v-if="this.$store.state.totalprofit >= 0"
          style="color:red;"
          >{{ towNumber(this.$store.state.totalprofit) + '%' }}</span
        >
        <span v-if="this.$store.state.totalprofit < 0" style="color:#06e108;">{{
          towNumber(this.$store.state.totalprofit) + '%'
        }}</span>
      </div>
    </div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
// 导入echarts
import * as Echarts from 'echarts'
export default {
  data() {
    return {
      loading: true
    }
  },
  computed: {
    tableData() {
      return this.$store.state.data3
    }
  },
  methods: {
    towNumber(val) {
      return Number(val).toFixed(2)
    },
    getCurrentTime() {
      // 获取当前时间并打印
      var data = new Date()
      this.value =
        data.getFullYear() +
        '-' +
        (data.getMonth() < 9
          ? '0' + (data.getMonth() + 1)
          : data.getMonth() + 1) +
        '-' +
        (data.getDate() <= 9 ? '0' + data.getDate() : data.getDate())
      console.log(this.value)
      this.$store.state.todayTime = this.value
    },
    profit() {
      if (this.$store.state.TIME.indexOf(this.$store.state.todayTime) > -1) {
        var today = this.$store.state.NET.length - 2
        this.$store.state.todayprofit =
          ((this.towNumber(this.$store.state.todayNet) -
            this.$store.state.NET[today]) /
            this.$store.state.NET[today]) *
          100
      } else {
        var today1 = this.$store.state.NET.length - 1
        this.$store.state.todayprofit =
          ((this.towNumber(this.$store.state.todayNet) -
            this.$store.state.NET[today1]) /
            this.$store.state.NET[today1]) *
          100
      }
      var week = this.$store.state.NET.length - 7
      if (week >= 0) {
        this.$store.state.weekprofit =
          ((this.towNumber(this.$store.state.todayNet) -
            this.$store.state.NET[week]) /
            this.$store.state.NET[week]) *
          100
      } else {
        this.$store.state.weekprofit = '-'
      }
      var month = this.$store.state.NET.length - 30
      if (month >= 0) {
        this.$store.state.monthprofit =
          ((this.towNumber(this.$store.state.todayNet) -
            this.$store.state.NET[month]) /
            this.$store.state.NET[month]) *
          100
      } else {
        this.$store.state.monthprofit = '-'
      }
      this.$store.state.totalprofit =
        ((this.towNumber(this.$store.state.todayNet) -
          this.$store.state.NET[0]) /
          this.$store.state.NET[0]) *
        100
    },
    flashMyChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = Echarts.init(document.getElementById('main'))
      // 获取数据
      // ----------
      // 准备数据和配置项
      // 合并
      // const result = _.merge(res.data,this.options)
      this.getCurrentTime()
      this.$store.state.dataTime = []
      this.$store.state.dataNet = []
      if (this.$store.state.TIME.indexOf(this.$store.state.todayTime) > -1) {
        this.$store.state.dataTime.push(...this.$store.state.TIME)
        this.$store.state.dataNet.push(...this.$store.state.NET)
        for (let i = 0; i < this.$store.state.NET.length; i++) {
          this.$store.state.NET1[i] = this.towNumber(
            this.$store.state.NET[i] - 100
          )
        }
        this.$store.state.dataNet1.push(...this.$store.state.NET1)
      } else {
        this.$store.state.dataTime.push(
          ...this.$store.state.TIME,
          this.$store.state.todayTime
        )
        this.$store.state.dataNet.push(
          ...this.$store.state.NET,
          this.towNumber(this.$store.state.todayNet)
        )
        for (let i = 0; i < this.$store.state.NET.length; i++) {
          this.$store.state.NET1[i] = this.towNumber(
            this.$store.state.NET[i] - 100
          )
        }
        this.$store.state.dataNet1.push(
          ...this.$store.state.NET1,
          this.towNumber(this.$store.state.todayNet - 100)
        )
      }
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['账户收益率(%)']
        },
        xAxis: {
          data: this.$store.state.dataTime
        },
        yAxis: {
          axisLabel: {
            margin: 5
          }
          // min: Math.min(...this.$store.state.dataNet),
          // max: this.towNumber(Math.max(...this.$store.state.dataNet))
        },
        series: [
          {
            name: '账户收益率(%)',
            type: 'line',
            // data: this.$store.state.dataNet
            data: this.$store.state.dataNet1
          }
        ]
      }
      // 展示数据
      myChart.setOption(option)
    }
  },
  created() {
    // 3. 动态计算表格高度
    const windowHeight =
      document.documentElement.clientHeight || document.body.clientHeight
    // 此处减去100即为当前屏幕内除了表格高度以外其它内容的总高度，
    this.tableHeight = windowHeight - 650
    console.log(this.tableHeight)
  },
  watch: {
    NewData: function() {
      setTimeout(() => {
        this.SUBsrcibe()
        this.getHQ1()
        this.flashMyChart()
        this.profit()
        this.loading = false
      }, 100)
    }
  },
  mounted() {
    this.flashMyChart()
    this.profit()
    this.isLoading()
  }
}
</script>

<style Lang="less" scoped>
.profit {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.tp,
.wp {
  margin: 20px;
  font-size: 20px;
}
</style>
